<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>限定输入内容</title>
	</head>
	<body>
		<form>
			年份：<input type="text" name="year"/> <span id="yearError"></span>
			<br />
			月份：<input type="text" name="month"/> <span id="monthError"></span>
			<br />
			<button>查询</button>
		
		</form>
		
		<script>
			/* 1、获取元素对象
			   2、验证年份的函数：4位数字
			   3、验证月份的函数：1-12数字   01-09  或者1-9
			   4、年份和月份添加失去焦点事件
			   */
			// 1、获取元素对象
			var inputs=document.getElementsByTagName('input');
			var yearError=document.getElementById('yearError');
			var monthError=document.getElementById('monthError');
			// 2、验证年份的函数：4位数字
			function checkYear(obj){
				// 验证obj内的值是否是4位数字				
				var str=obj.value; 
				// 4位数字的正则表达式:\d表示0-9的数字，{n}表示前面的字符出现n次
				var reg=/^\d{4}$/;
				if(!str.match(reg)){ // 不匹配
					yearError.innerHTML="输入错误，年份为4位数字";
				}else{
					yearError.innerHTML='';
				}				
			}
			
			function checkMonth(obj){
				// 验证obj内的值是否是4位数字				
				var str=obj.value; 
				// 1-9或者01-09   10-12
				// ？表示前面字符出现0次或1次
				var reg=/^(0?[1-9]|1[0-2])$/;
				if(!str.match(reg)){ // 不匹配
					monthError.innerHTML="输入错误";
				}else{
					monthError.innerHTML='';
				}				
			}
			
			// 年份输入框添加失去焦点事件
			inputs[0].onblur=function (){
				checkYear(this);
			}
			
			inputs[1].onblur=function (){
				checkMonth(this);
			}
		</script>
	</body>
</html>
